<template>
  <div class="home">
    <div>
      <button @click="changeModel(false)">管床模式</button>
      <button @click="changeModel(true)">管房模式</button>
      <button @click="changeCardStyle">{{ change_card_btn_text }}</button>
    </div>
    <bedCard
      v-for="o in 50"
      :data-id="o"
      :data="o"
      :key="o"
      :class="{ simple: is_simple, card_room: card_model }"
      @click.native="showDetail"
    ></bedCard>
  </div>
</template>

<script>
import bedCard from "../components/bedCard";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "index",
  data() {
    return {
      card_model: "",
      is_simple: false,
      change_card_btn_text: "简卡"
    };
  },
  created() {
    this.getBedListData();
  },
  computed: {
    ...mapGetters(["bedListData"])
  },
  methods: {
    ...mapActions(["getBedListData"]),
    showDetail(event) {
      this.$router.push({
        path: "/detail",
        query: { id: event.target.dataset.id }
      });
    },
    //显示模式切换
    changeModel(type) {
      this.card_model = type;
    },
    changeCardStyle() {
      this.is_simple = !this.is_simple;
      this.change_card_btn_text = this.is_simple ? "原卡" : "简卡";
    }
  },
  components: {
    bedCard
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
